<!--
author:        leishanfeng <1628316216@qq.com>
date:          2023-07-06 16:42:28
component:     index
Copyright © YourCompanyName All rights reserved
-->
<template>
  <div class="leader-group">
    <div class="btnbox">
      <div class="btnbox-left">
        <tx-button-add
          name="添加成员"
          @click="addMaterial"
          v-show="!isModifySorting"
        />
        <!-- <tx-button-icon
          name="批量导入"
          @click="daoruMaterial"
          v-show="!isModifySorting"
        /> -->
      </div>
      <div class="btnbox-right">
        <tx-button-icon
          v-show="!isModifySorting"
          name="修改排序"
          @click="ModifySorting"
          :imgUrl="require('@/assets/TeamAdministrator/btn-rank.png')"
        />
        <el-tooltip
          v-show="!isModifySorting"
          class="item"
          effect="dark"
          content="点击后进入修改排序模式，用户可以自行手动拖拽调整"
          placement="bottom-start"
        >
          <div class="tooltip"></div>
        </el-tooltip>
        <el-button
          v-show="isModifySorting"
          @click="bcpx"
          style="
            border: 1px solid #38c2c6;
            background: #38c2c6;
            border-radius: 4px;
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 0.9);
          "
          >保存排序</el-button
        >
        <el-button
          v-show="isModifySorting"
          @click="qxpx"
          style="
            background: #1d5a8f;
            border-radius: 4px;
            border: 1px solid #7cadd8;
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 0.9);
          "
          >取消排序</el-button
        >
      </div>
    </div>
    <tx-list-table :table="table" ref="listTable" row-key="name" height="600">
      <tx-table-column-text label="排序" width="60">
        <template slot-scope="scope">
          <div>
            <span>{{ scope.scope.scope.$index + 1 }}</span>
          </div>
        </template>
      </tx-table-column-text>
      <tx-table-column-text label="姓名">
        <template slot-scope="scope">
          <div v-if="!scope.row.editing">
            <span>{{ scope.row.name }}</span>
          </div>
          <div v-if="scope.row.editing">
            <el-input
              v-model="scope.row.name"
              class="input-table-edit"
              placeholder="请输入姓名"
            ></el-input>
          </div>
        </template>
      </tx-table-column-text>
      <tx-table-column-text label="单位">
        <template slot-scope="scope">
          <div v-if="!scope.row.editing">
            <span>{{ scope.row.orgName }}</span>
          </div>
          <div v-if="scope.row.editing">
            <el-input
              v-model="scope.row.orgName"
              class="input-table-edit"
              placeholder="请输入单位"
            ></el-input>
          </div>
        </template>
      </tx-table-column-text>
      <tx-table-column-text label="职务">
        <template slot-scope="scope">
          <div v-if="!scope.row.editing">
            <span>{{ scope.row.job }}</span>
          </div>
          <div v-if="scope.row.editing">
            <el-input
              v-model="scope.row.job"
              class="input-table-edit"
              placeholder="请输入职务"
            ></el-input>
          </div>
        </template>
      </tx-table-column-text>
      <tx-table-column-text label="手机号">
        <template slot-scope="scope">
          <div v-if="!scope.row.editing">
            <span>{{ scope.row.phone }}</span>
          </div>
          <div v-if="scope.row.editing">
            <el-input
              v-model="scope.row.phone"
              class="input-table-edit"
              placeholder="请输入手机号"
            ></el-input>
          </div>
        </template>
      </tx-table-column-text>
      <tx-table-column-action>
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            v-if="!scope.row.editing"
            class="table-edit-btn"
            @click="handleEdit(scope)"
            >编辑
          </el-button>
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.editing"
            @click="handleSave(scope)"
            class="table-save-btn"
            >保存
          </el-button>
          <el-button
            size="mini"
            type="warning"
            v-if="scope.row.editing"
            @click="handleCancel(scope)"
            class="table-cancel-btn"
            >取消
          </el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.editing"
            @click="handleDelete(scope)"
            class="table-del-btn"
            >删除
          </el-button>
        </template>
      </tx-table-column-action>
    </tx-list-table>
    <!-- {{
      $nextTick(() => {
        $initDragTable($refs['listTable'], table.page, 'records')
      })
    }} -->
  </div>
</template>

<script>
import {
  idaasFindUsersByDepId,
  uNew,
  uUd,
  uDelete
} from '@/api/resourceManagement/index.js'
export default {
  name: 'sort',
  data() {
    return {
      isModifySorting: false,
      currentTables: {}, //
      table: {
        loading: false,
        query: {},
        sort: {
          descs: ['updateTime']
        },
        page: this.$yzvue.initPage()
      }
    }
  },

  mounted() {
    this.loadTable()

    console.log('records', this.sortable, this.table.page)
  },
  created() {
    this.currentTables = JSON.parse(localStorage.getItem('tempList'))
  },
  methods: {
    // 批量导入
    daoruMaterial() {},
    //保存排序
    bcpx() {
      this.isModifySorting = !this.isModifySorting
      let params = this.table.page.records
        ?.filter(i => i.id)
        ?.map((i, k) => {
          return {
            id: i.id,
            udOrder: k + 1
          }
        })
      uUd(params).then(res => {
        if (res && res.code == 0) {
          this.$message.success('保存成功')
          this.$stopDragTable()
        } else {
          this.$message.error('服务端返回数据异常')
        }
      })
    },
    // 取消排序
    qxpx() {
      this.isModifySorting = !this.isModifySorting
      this.loadTable()
      this.$stopDragTable()
    },
    // 修改排序
    ModifySorting() {
      this.isModifySorting = !this.isModifySorting
      console.log(this.$refs)
      this.$nextTick(() => {
        this.$initDragTable(this.$refs['listTable'], this.table.page, 'records')
      })
    },
    // 添加
    addMaterial() {
      this.$yzvue.newAddItem(this.table.page)
      this.$nextTick(() => {
        let container = this.$el.querySelector('.el-table__body-wrapper')
        container.scrollTop = container.scrollHeight
      })
    },
    handleQuery() {
      this.loadTable()
    },

    async loadTable() {
      let param = this.getQueryParam()
      console.log(param, 'this.$userInfo', this.$userInfo)
      this.table.loading = true

      // const { data } = await getList({ ...param, });
      idaasFindUsersByDepId({ depId: this.$userInfo.orgId }).then(res => {
        console.log(res)
        this.$yzvue.assembleBody(this.table.page, { records: res.data })
        this.table.loading = false
        // this.$nextTick(() => {
        //   this.$initDragTable(
        //     this.$refs['partsTable'],
        //     this.table.page,
        //     'records'
        //   ).then(()=>{
        //     this.$stopDragTable()
        //   })
        // })
      })
    },

    getQueryParam() {
      let param = this.$yzvue.assemblePage(this.table)
      let query = this.table.query
      this.$yzvue.appendFilter(param.body.filters, 'name', 'like', query.name)
      return param
    },
    // 编辑
    handleEdit($scope) {
      let {
        scope: { scope }
      } = $scope
      this.$set(this.table.page.records[scope.$index], 'editing', true)
      this.currentTables = JSON.parse(
        JSON.stringify(this.table.page.records[scope.$index])
      ) // 保存当前历史编辑行
      console.log('records---', this.table.page.records)
    },
    // 保存
    handleSave($scope) {
      let {
        scope: { scope }
      } = $scope
      if (
        !scope.row.job ||
        !scope.row.name ||
        !scope.row.orgName ||
        !scope.row.phone
      ) {
        this.$message({
          message: '请完善队伍人员信息！',
          type: 'warning'
        })
        return
      }
      scope.row.menuId = this.$userInfo.menuId
      scope.row.createdBy = this.$userInfo.phone
      scope.row.depId = this.$userInfo.orgId
      uNew(scope.row).then(res => {
        if (res && res.code == 0) {
          this.$message.success('保存成功')
          if (scope.row.is_New_Add) {
            this.$set(
              this.table.page.records[scope.$index],
              'is_New_Add',
              false
            )
          }
          this.$set(this.table.page.records[scope.$index], 'editing', false)
        } else {
          this.$message.error('服务端返回数据异常')
        }
      })

      // 请求后台接口更新数据库
    },
    // 取消
    handleCancel($scope) {
      let {
        scope: { scope }
      } = $scope
      console.log('scope.is_New_Add', scope)
      if (scope.row.is_New_Add) {
        this.table.page.records = this.table.page.records.filter(item => {
          return !item.is_New_Add
        })
        return
      }
      this.$set(this.table.page.records, scope.$index, {
        ...this.currentTables,
        editing: false
      })
    },
    //删除
    handleDelete($scope) {
      let {
        scope: { scope }
      } = $scope
      this.table.page.records.splice(scope.$index, 1)
      console.log(scope.row)
      uDelete(scope.row).then(res => {
        console.log(res)
        if (res && res.code == 0) {
          this.$message.success('删除成功')
        } else {
          this.$message.error('服务端返回数据异常')
        }
      })
      // 请求后台接口删除数据库数据
    }
  }
}
</script>

<style lang="scss">
.leader-group {
  .btnbox {
    display: flex;
    justify-content: space-between;
    .btnbox-left {
      display: flex;
      align-items: center;
    }
    .btnbox-right {
      display: flex;
      align-items: center;
      .tooltip {
        margin-left: 10px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        background: url('~@/assets/TeamAdministrator/icon_explain.png')
          no-repeat;
      }
    }
  }
}
// .cell {
//   display:flex;
//   justify-content: center !important;
// }
</style>
